<template>
	<div class="">
		<div class="crumbs">
			<!-- <h2 class="">讲师管理</h2> -->
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="讲师列表" name="one"></el-tab-pane>
				<el-tab-pane label="审核列表" name="two"></el-tab-pane>
			</el-tabs>
		</div>
		<div class="container ">
			<div class="handle-box margin-bottom20 row-me row-center">
				<el-form :model="query" label-width="80px" class="ipt row-me">
					<el-form-item label="讲师名称">
						<el-input v-model="query.name" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="地区">
						<el-cascader :props="{emitPath: false,value: 'id',label: 'name',checkStrictly: true}" v-model="query.city"
							:options="areaList" placeholder="请选择地区"></el-cascader>
					</el-form-item>
					<el-form-item label="认领用户" v-if="activeName == 'two'">
						<el-input v-model="query.key" placeholder="请输入认领用户昵称、手机号"></el-input>
					</el-form-item>
				</el-form>

				<div class="margin-bottom20 margin-left20">
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button @click="resetClick">重置</el-button>
					<el-button type="primary" class="handle-del" @click="exportClick">批量导出
					</el-button>
				</div>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="40" align="center"></el-table-column>
				<!-- <el-table-column type="index" width="55" align="center" label="序号"></el-table-column> -->
				<el-table-column prop="id" width="55" align="center" label="ID"></el-table-column>
				<el-table-column prop="name" label="讲师头像/昵称" align="center">
					<template slot-scope="scope">
						<div class="row-me row-center">
							<el-image class="width40 height40" :src="scope.row.lecturerImg"
								:preview-src-list="[scope.row.lecturerImg]"></el-image>
							<span>{{scope.row.name}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="所属地区" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.cityShengName}}{{scope.row.cityShiName}}{{scope.row.cityXianName}}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="详细地址" align="center"></el-table-column>
				<el-table-column prop="lecturerComment" label="一句话介绍自己" align="center"></el-table-column>
				<el-table-column prop="education" label="学历" align="center"></el-table-column>
				<el-table-column prop="teachMini" label="授课科目" align="center"></el-table-column>
				<el-table-column prop="sort" label="班次" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.classes == 1">笔试</span>
						<span v-if="scope.row.classes == 2">面试</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="申请入驻时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<!-- status	审核状态0待审核1审核成功2审核失败 -->
						<el-button type="text" @click="auditClick(scope.$index, scope.row,false)"
							v-if="activeName == 'two' && scope.row.status == 0">审核</el-button>
						<el-button type="text" @click="EditClick(scope.$index, scope.row,false)">编辑</el-button>
						<el-button type="text" @click="EditClick(scope.$index, scope.row,true)">详情</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row.id)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 讲师详情 -->
		<el-dialog title="讲师详情" :visible.sync="lecturerShow" width="50%" class="lecturerBox">
			<el-form ref="lecturerForm" :model="lecturerForm" :rules="rules">
				<h4 style="margin-top: 0;">基本信息</h4>
				<el-form-item label="头像" label-width="100px" prop="lecturerImg" required>
					<div class="videoBox">
						<el-image v-if="lecturerForm.lecturerImg" class="width100 height100 radius6 margin-right10"
							:src="lecturerForm.lecturerImg" :preview-src-list="[lecturerForm.lecturerImg]"></el-image>
						<el-button type="text" @click="clickImg">点击图片库</el-button>
					</div>
				</el-form-item>
				<el-form-item label="讲师姓名" label-width="100px" prop="name">
					<el-input v-model="lecturerForm.name" placeholder="请输入" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="一句话简介" label-width="100px" prop="lecturerComment">
					<el-input type="textarea" v-model="lecturerForm.lecturerComment" maxlength="30" placeholder="请输入"
						:disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="地区" label-width="100px" prop="area" :required="true">
					<el-cascader v-model="lecturerForm.area" :options="areaList"
						:props="{value: 'adcode', label: 'name', expandTrigger: 'hover' }" class="width100Per"
						:disabled="isDisabled"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" label-width="100px" prop="address">
					<el-input type="textarea" v-model="lecturerForm.address" placeholder="请输入" :disabled="isDisabled"></el-input>
				</el-form-item>
				<h4>其他信息</h4>
				<el-form-item label="毕业时间" label-width="100px" prop="graduateTime">
					<el-input placeholder="请输入" v-model="lecturerForm.graduateTime" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="毕业院校" label-width="100px" prop="graduateSchool">
					<el-input v-model="lecturerForm.graduateSchool" placeholder="请输入" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="最高学历" label-width="100px" prop="education">
					<el-select placeholder="请选择" v-model="lecturerForm.education" :disabled="isDisabled" class="width100Per">
						<el-option v-for="(item,index) in educationList" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="讲授科目" label-width="100px" prop="teachMini1">
					<el-select v-model="lecturerForm.teachMini1" multiple placeholder="请选择" class="width100Per"
						:disabled="isDisabled" @change="$forceUpdate()">
						<el-option v-for="(item,index) in courseList" :key="index" :label="item.name" :value="item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="讲授年限" label-width="100px" prop="teachYear">
					<el-input v-model="lecturerForm.teachYear" placeholder="请输入" :disabled="isDisabled"
						onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
				</el-form-item>
				<el-form-item label="期望薪资" label-width="100px" prop="expectedSalary">
					<el-input v-model="lecturerForm.expectedSalary" placeholder="请输入" :disabled="isDisabled"
						onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
				</el-form-item>
				<el-form-item label="详细介绍" label-width="100px" prop="showComment">
					<el-input type="textarea" v-model="lecturerForm.showComment" maxlength="1000" placeholder="请输入"
						:disabled="isDisabled"></el-input>
				</el-form-item>
				<h4>资质</h4>
				<el-form-item label="身份信息" label-width="100px" class="margin-bottom40" prop="identityImg">
					<div class="row-me row-center">
						<div class="videoBox margin-right20" v-if="isDisabled == false">
							<el-image v-if="lecturerForm.identityImg" class="width100 height100 radius6 margin-right10"
								:src="lecturerForm.identityImg" :preview-src-list="[lecturerForm.identityImg]"></el-image>
							<el-button type="text" @click="clickImg1">点击图片库(身份证正面)</el-button>
						</div>
						<div class="videoBox margin-right20" v-if="isDisabled == true">
							<el-image class="width100Per height100Per" :src="lecturerForm.identityImg"
								:preview-src-list="[lecturerForm.identityImg]">
							</el-image>
							<div class="color606266 align-center" style="margin-top: -10px;">身份证正面</div>
						</div>
						<div class="videoBox" v-if="isDisabled == false">
							<el-image v-if="lecturerForm.identityImgf" class="width100 height100 radius6 margin-right10"
								:src="lecturerForm.identityImgf" :preview-src-list="[lecturerForm.identityImgf]"></el-image>
							<el-button type="text" @click="clickImg2">点击图片库(身份证反面)</el-button>
						</div>
						<div class="videoBox margin-right20" v-if="isDisabled == true">
							<el-image class="width100Per height100Per" :src="lecturerForm.identityImgf"
								:preview-src-list="[lecturerForm.identityImgf]">
							</el-image>
							<div class="color606266 align-center" style="margin-top: -10px;">身份证反面</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="荣誉证书" label-width="100px" prop="honorImg">
					<div v-if="lecturerForm.honorImg&&lecturerForm.honorImg.length!=0" class="row-me flex-end2 flex-wrap">
						<div class="posRelative margin-right10" v-for="(item,index) in lecturerForm.honorImg" :key="index">
							<el-image class="width100 height100 radius6" :src="item" :preview-src-list="[item]"></el-image>
							<i class="el-icon-error posAbsoluteRight pointer font-size20"
								@click="lecturerForm.honorImg.splice(index,1)"></i>
						</div>
					</div>
					<el-button type="text" @click="clickImg3" v-if="!isDisabled">点击图片库(荣誉证书)</el-button>
				</el-form-item>


			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="lecturerShow=false" v-if="isDisabled">关 闭</el-button>
				<el-button type="primary" @click="lecturerSure('lecturerForm')" v-else>确 定</el-button>
			</span>
		</el-dialog>

		<!-- 审核 -->
		<el-dialog title="审核" :visible.sync="examineVisible" width="600px">
			<el-form :model="examineForm">
				<el-form-item label="状态">
					<el-select placeholder="请选择" v-model="examineForm.status">
						<el-option label="审核通过" :value="1"></el-option>
						<el-option label="审核驳回" :value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="lecturerShow=false">取 消</el-button>
				<el-button type="primary" @click="handleExamSave">确 定</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="lecturerImg" @handleImgOk="handleImgOk"></imgLibrary>
		<imgLibrary ref="identityImg" @handleImgOk="handleImgOk1"></imgLibrary>
		<imgLibrary ref="identityImgf" @handleImgOk="handleImgOk2"></imgLibrary>
		<imgLibrary ref="honorImg" @handleImgOk="handleImgOk3"></imgLibrary>

	</div>
</template>

<script>
	import uploadLocal from "@/components/Upload/multiUploadLocal"
	import singleUploadLocal from "@/components/Upload/singleUploadLocal"
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			uploadLocal,
			singleUploadLocal,
			imgLibrary
		},
		name: 'categoryTable',
		data() {
			return {
				activeName: 'one',
				query: {
					status: '',
					pageNumber: 1,
					pageSize: 30
				},
				dialogTitle: '',
				tableData: [],
				multipleSelection: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				areaList: [], //地区
				approveList: [],
				lecturerShow: false,
				lecturerForm: {
					teachMini1: [],
				},
				// 22222222222222222
				rules: {
					lecturerImg: [{
						required: true,
						message: '请上传',
						trigger: 'change'
					}],
					name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					area: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					summary: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					graduateTime: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					graduateSchool: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					education: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					teachMini1: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					teachYear: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					expectedSalary: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					showComment: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					identityImg: [{
						required: true,
						message: '请上传',
						trigger: 'change'
					}],
					identityImgf: [{
						required: true,
						message: '请上传',
						trigger: 'change'
					}],
					honorImg: [{
						required: true,
						message: '请上传',
						trigger: 'change'
					}],
				},
				courseList: [], //科目
				fileList: [],
				isDisabled: true,
				educationList: ['小学', '初中', '高中', '中专', '大专', '本科', '硕士', '研究生', '博士研究室学历'],
				examineVisible: false,
				examineForm: {}
			};
		},
		created() {
			this.getProvinceWay();
			this.getData();
			this.teacherAllWay();
		},
		methods: {
			// 点击上传头像
			//获取选中的图片
			handleImgOk(data) {
				this.$set(this.lecturerForm, 'lecturerImg', data)
			},
			//点击图片库
			clickImg() {
				this.$refs.lecturerImg.show()
			},

			handleImgOk1(data) {
				this.$set(this.lecturerForm, 'identityImg', data)
			},
			clickImg1() {
				this.$refs.identityImg.show()
			},

			handleImgOk2(data) {
				this.$set(this.lecturerForm, 'identityImgf', data)
			},
			clickImg2() {
				this.$refs.identityImgf.show()
			},

			handleImgOk3(data) {
				this.lecturerForm.honorImg.push(...data)
			},
			clickImg3() {
				this.$refs.honorImg.show(1)
			},



			// 递归移除第4层children
			getTreeData(data) {
				// 循环遍历json数据
				for (var i = 0; i < data.length; i++) {
					if (data[i].level == 3) { //等于3的时候把第4层children-设为-undefined
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
			// 获取省市区
			getProvinceWay() {
				this.$get('/admin/area/getAllArea', {}).then((res) => {
					if (res.code == 1000) {
						this.areaList = this.getTreeData(res.data); //获取树结构值
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			teacherAllWay() {
				this.$postForm('/admin/minis/teacherAll', {
					pageNumber: 1,
					pageSize: 10000
				}).then((res) => {
					if (res.code == 1000) {
						this.$forceUpdate(); //强制刷新
						this.courseList = res.data.list
					}
				}).catch((error) => {
					console.log(error)
				})
			},

			// 上传头像
			headImgUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 10;
				let isImage = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp'];
				// let isImage = ['image/png'];
				const isJPG = isImage.includes(file.type);
				if (!isJPG) {
					this.$message.error('上传图片只支持PNG，JPG!')
					return false
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 1G!');
				}
				return isJPG && isLt2M;
			},
			// 上传图片
			headImgFile(param) {
				const file = param.file
				const formData = new FormData()
				formData.append('file', file)
				this.$uploadFile('/file/upload', formData).then((res) => {
					if (res.code == 1000) {
						this.$nextTick(() => {
							this.lecturerForm.lecturerImg = res.data
							this.$forceUpdate()
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},

			frontImgUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 10;
				let isImage = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp'];
				// let isImage = ['image/png'];
				const isJPG = isImage.includes(file.type);
				if (!isJPG) {
					this.$message.error('上传图片只支持PNG，JPG!')
					return false
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 1G!');
				}
				return isJPG && isLt2M;
			},
			// 上传图片
			frontImgFile(param) {
				const file = param.file
				const formData = new FormData()
				formData.append('file', file)
				this.$uploadFile('/file/upload', formData).then((res) => {
					if (res.code == 1000) {
						this.$nextTick(() => {
							this.lecturerForm.identityImg = res.data
							this.$forceUpdate()
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},

			versoImgUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 10;
				let isImage = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp'];
				// let isImage = ['image/png'];
				const isJPG = isImage.includes(file.type);
				if (!isJPG) {
					this.$message.error('上传图片只支持PNG，JPG!')
					return false
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 1G!');
				}
				return isJPG && isLt2M;
			},
			// 上传图片
			versoImgFile(param) {
				const file = param.file
				const formData = new FormData()
				formData.append('file', file)
				this.$uploadFile('/file/upload', formData).then((res) => {
					if (res.code == 1000) {
						this.$nextTick(() => {
							this.lecturerForm.identityImgf = res.data
							this.$forceUpdate()
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},

			honorImgUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 10;
				let isImage = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp'];
				// let isImage = ['image/png'];
				const isJPG = isImage.includes(file.type);
				if (!isJPG) {
					this.$message.error('上传图片只支持PNG，JPG!')
					return false
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 1G!');
				}
				return isJPG && isLt2M;
			},
			// 上传图片
			honorImgFile(param) {
				const file = param.file
				const formData = new FormData()
				formData.append('file', file)
				this.$uploadFile('/file/upload', formData).then((res) => {
					if (res.code == 1000) {
						this.$nextTick(() => {
							this.lecturerForm.honorImg = res.data
							this.$forceUpdate()
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			lecturerSure(lecturerForm) {
				this.$refs[lecturerForm].validate((valid) => {
					if (valid) {
						this.lecturerForm.teachMini = this.lecturerForm.teachMini1.join(",");
						this.lecturerForm.citySheng = this.lecturerForm.area[0];
						this.lecturerForm.cityShi = this.lecturerForm.area[1];
						this.lecturerForm.cityXian = this.lecturerForm.area[2];
						this.lecturerForm.honorImg = this.lecturerForm.honorImg ? this.lecturerForm.honorImg.toString() : ''
						this.$post('/admin/lecturers/lecturerUpdate', this.lecturerForm).then((res) => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData();
								this.lecturerShow = false;
							}
						}).catch((error) => {
							console.log(error)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			getImgData(data) {
				this.lecturerForm.honorImg = data.toString()
			},
			getImgData1(data) {
				if (data && data.length != 0) {
					this.lecturerForm.certificate = data
				}
			},
			// 点击tab切换
			handleClick(tab, event) {
				if (this.activeName == 'one') {
					this.query.status = '';
				} else {
					this.query.status = 0;
				}
				this.getData();
			},
			// 上传头像

			//删除
			async handleDel(id) {
				const res = await this.$postForm('/admin/lecturers/lecturerDeleted', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			// 点击编辑详情
			EditClick(index, row, type) {
				this.lecturerForm = {};
				this.lecturerForm.teachMini1 = [];
				this.lecturerForm = JSON.parse(JSON.stringify(row)) //  深拷贝;

				this.lecturerForm.teachMini1 = row.teachMini.split(',');
				this.lecturerForm.area = [];
				this.lecturerForm.area.push(row.citySheng);
				this.lecturerForm.area.push(row.cityShi);
				this.lecturerForm.area.push(row.cityXian);
				this.fileList = []
				if (this.lecturerForm.honorImg) {
					this.lecturerForm.honorImg = this.lecturerForm.honorImg.split(',')
					for (let item of this.lecturerForm.honorImg) {
						this.fileList.push(item)
					}

				}
				this.lecturerShow = true;
				this.isDisabled = type;
			},
			async handleExamSave() {
				const res = await this.$post('/admin/lecturers/lecturerUpdate', {
					id: this.examineForm.id,
					status: this.examineForm.status
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData();
					this.examineVisible = false
				}
			},
			// 点击审核
			auditClick(index, row) {
				this.examineForm.id = row.id
				this.examineVisible = true
			},
			parseParams(data) {
				try {
					var tempArr = [];
					for (var i in data) {
						var key = encodeURIComponent(i);
						var value = encodeURIComponent(data[i]);
						tempArr.push(key + '=' + value);
					}
					var urlParamsStr = tempArr.join('&');
					return urlParamsStr;
				} catch (err) {
					return '';
				}
			},
			// 批量导出
			exportClick() {
				if (this.multipleSelection.length == 0) {
					this.$message.warning('请先选择数据!')
					return
				}

				var list = [];
				this.multipleSelection.forEach((item, index) => {
					list.push(item.id)
				});

				let params = {};
				// params.pageSize = 1000000000;
				// let appid = localStorage.getItem('htk_appid');
				params.token = localStorage.getItem('token');
				params.ids = list;
				if (this.activeName == 'one') {
					window.open(this.$host + '/admin/lecturers/lecturerExport?' + this.parseParams(params));
				} else {

				}
			},
			// 选择省区
			handleChange(value) {
				console.log(value);
				this.query.citySheng = this.query.area[0];
				this.query.cityShi = this.query.area[1];
				this.query.cityXian = this.query.area[2];
			},
			// 获取 easy-mock 的模拟数据
			getData() {
				if (this.activeName == 'one') {
					this.query.status = 1;
				} else {
					this.query.status = 0;
				}
				this.$postForm('/admin/lecturers/lecturerAll?' + this.$.getParamsString(this.query)).then((res) => {
					if (res.code == 1000) {
						this.$forceUpdate(); //强制刷新
						this.tableData = res.data.list
						this.pageTotal = res.data.totalRow
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1;

				if (!this.$.isEmpty(this.query.area)) {
					if (this.query.area.length > 0) {
						this.query.citySheng = this.query.area[0];
						this.query.cityShi = this.query.area[1];
						this.query.cityXian = this.query.area[2];
					}
				}

				if (this.activeName == 'one') {
					this.query.status = 1;
				} else {
					this.query.status = 0;
				}
				this.getData();
			},
			// 点击重置
			resetClick() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				if (this.activeName == 'one') {
					this.query.status = '';
				} else {
					this.query.status = 0;
				}
				this.getData();
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 编辑操作
			handleEdit(index, row) {
				this.title = '编辑排名';
				this.idx = index;
				this.form = row;
				this.rankingShow = true;
			},

			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			}
		}
	};
</script>

<style>
	.lecturerBox {
		.el-input {
			width: 100%;
		}
	}

	.videoBox {
		position: relative;
		width: 148px;
		/* height: 148px; */
		/* background: indianred; */
		display: flex;
		flex-direction: column;

		.delBox {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 22px;
			cursor: pointer;
		}

		.delBox:hover {
			color: red;
		}

		.el-button {
			text-align: left;
		}
	}
</style>